一、前言
大约有两周没学习更文,不是懒,而是没心情,相亲路屡战屡败,着实很影响心情。
![](https://img2020.cnblogs.com/blog/718867/202111/718867-20211113194338434-1443162471.png)
我想这世上对我而言,最难的事,莫过于恋爱结婚了,再一次经历了见光死的高光时刻。
二、又见Ant Design Vue
在大量数据需要展示时,我们一般都会以报表的形式展现,按照直觉习惯,肯定使用table表格来展示行列数据。
因此,我们要使用Ant Design Vue组件库中的table组件,来进行数据的绑定。
1、官网地址
官网地址:https://2x.antdv.com/components/table-cn#API
2、怎么使用
我们先对电子书管理页面改造,将布局进行调整,示例代码如下:
电子书管理页面
效果如下:
![](https://img2020.cnblogs.com/blog/718867/202111/718867-20211113200222055-1547373698.png)
3、将电子书表格进行展示
要做的事:
表格渲染
slots: 自定义渲染
title: 表头渲染
customRender: 值渲染
示例代码如下:
{{ text }}
Name
编辑
删除
import {SmileOutlined, DownOutlined} from '@ant-design/icons-vue';
import {defineComponent, onMounted, reactive, ref, toRef} from 'vue';
import axios from 'axios';
export default defineComponent({
name: 'AdminEbook',
setup() {
const pagination = {
onChange: (page: number) => {
console.log(page);
},
pageSize: 3,
};
const loading = ref(false);
const columns = [
{
title: '封面',
dataIndex: 'cover',
slots: {customRender: 'cover'}
},
{
title: '名称',
dataIndex: 'name'
},
{
title: '分类一',
dataIndex: 'category1Id',
key: 'category1Id',
},
{
title: '分类二',
dataIndex: 'category2Id',
key: 'category2Id',
},
{
title: '文档数',
dataIndex: 'docCount'
},
{
title: '阅读数',
dataIndex: 'viewCount'
},
{
title: '点赞数',
dataIndex: 'voteCount'
},
{
title: 'Action',
key: 'action',
slots: {customRender: 'action'}
}
];
//使用ref进行数据绑定
const ebooks = ref();
// 使用reactive进行数据绑定
const ebooks1 = reactive({books: []})
onMounted(() => {
axios.get("/ebook/list?name=").then(response => {
const data = response.data;
ebooks.value = data.content;
ebooks1.books = data.content;
})
})
return {
pagination,
loading,
columns,
ebooks1: ebooks,
ebooks2: toRef(ebooks1, "books")
}
},
components: {
SmileOutlined,
DownOutlined,
},
});
img {
width: 50px;
height: 50px;
}
实际效果:
![](https://img2020.cnblogs.com/blog/718867/202111/718867-20211113200610066-889949418.png)
三、写在最后
对于table组件的使用不是很熟的话,需要不断去尝试,简单说,就是对象属性的映射。
总体感觉下来,还是进行数据绑定后,在进行页面展示,如不是很清晰,请参考这篇《Vue3学习(七)之 列表界面数据展示》文章。
优秀不够,你是否无可替代
软件测试交流QQ群:721256703,期待你的加入!!
欢迎关注我的微信公众号:软件测试君
|